import { T } from "base/intl";
import { useEffect, useState } from "react";
import React from "react";
import Nodes from "./node";
import FlippableImage from "./FlippableImage";

export default function RandomImage(props) {
  const { selected, id } = props;
  const [randomLeftState, setRandomLeftState] = useState(0); // left
  const [randomRightState, setRandomRightState] = useState(0); // right
  const [rotate, setRotate] = useState(0);

  // 随机位置
  const getRandomNumber = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1) + min);
  };
  useEffect(() => {
    setRandomLeftState(getRandomNumber(0, 90));
    setRandomRightState(getRandomNumber(0, 90));
    setRotate(getRandomNumber(0, 360));
  }, []);

  const onclick = (e) => {
    e.preventDefault();
    props.onClick && props.onClick(id);
  };

  const domStyle = () => {
    return selected ?
    {} :
    {
      left: `${{ randomLeftState }}%`,
      top: `${randomRightState}%`,
      transform: `rotate(${rotate}deg)`
    };
  };
  return (
    <Nodes.RandomImageContainer>
      <div
        key={id}
        className={`random-image-container ${selected ? "selected" : ""}`}
        onClick={onclick}
        style={domStyle()}>

        {!selected && <img src={props.imgUrl}></img>}
        {selected && <FlippableImage imgUrl={props.imgUrl}></FlippableImage>}
      </div>
      {/* {selected &&  <FlippableImage></FlippableImage>} */}
    </Nodes.RandomImageContainer>);

}